<template>
  <div class="craft">
    <div class="title">
      <img src="../../assets/circle.png" alt="" />
      <p>施工工艺视频</p>
    </div>
    <div class="video">
      <!-- <img src="../../assets/video.png" alt=""> -->
      <video controls autoplay  muted src="https://outin-5ea1f168894611eca06300163e1c94a4.oss-cn-shanghai.aliyuncs.com/sv/fc787a1-1923cb84ec8/fc787a1-1923cb84ec8.mp4"></video>

    </div>
    <!-- <div id="preview">
      <img  src="../../assets/map.png" alt="图片预览" />
    </div> -->
  </div>
</template>

<script>
import { onMounted } from "vue";
export default {
  name: "craftView",
  components: {},
  setup() {
    // let imgContent
    onMounted(() => {
      // const preview = document.getElementById('preview');
      // imgContent = preview.querySelector('img');
      // console.log(imgContent,'imgContent');
      // let scale = 1;
      // preview.addEventListener('wheel', (event) => {
      //   event.preventDefault();
      //   if (event.deltaY < 0) {
      //       scale += 0.1;
      //   } else {
      //       scale -= 0.1;
      //   }
      //   scale = Math.min(Math.max(scale, 0.5), 3); // 限制缩放范围
      //   imgContent.style.transform = `translate(-50%, -50%) scale(${scale})`;
      // });
      // imgContent.onload = function () {
      //   imgWidth = this.offsetWidth;
      //   imgHeight = this.offsetHeight;
      // }
      // window.onload = () => {
      //   // imgContent.addEventListener('mousewheel', mouseRollFn);
      //   imgContent.addEventListener('mousedown', mouseDownFm);
      // }
    });
    // 移动
    // function mouseDownFm(event) {
    //   event.preventDefault();
    //   // const el = document.querySelector('img');
    //   // offSetX图片居中距离左侧的距离
    //   const disx = event.pageX - imgContent.offsetLeft;
    //   const disy = event.pageY - imgContent.offsetTop;
    //   document.onmousemove = function (f) {
    //     console.log(f,'onmousemove');
    //     imgContent.style.left = f.pageX - disx + 'px';
    //     imgContent.style.top = f.pageY - disy + 'px';
    //   };
    //   document.onmouseup = function () {
    //     document.onmousemove = document.onmouseup = null;
    //   };
    // }

    return {};
  },
};
</script>

<style lang="scss" scoped>
.craft {
  width: 80vw;
  margin: 0 auto;
}
.title {
  display: flex;
  width: 4rem;
  align-items: center;
  line-height: 0.5rem;
  margin: 0.2rem 0;
  font-weight: 700;
  background-image: linear-gradient(
    to right,
    rgba(61, 173, 252, 0.2),
    rgba(212, 234, 250, 0)
  );
  // background-color: linear-gradient(90deg, rgba(2, 14, 23, 0.2) 0%, rgba(212, 234, 250, 0) 100%);;
  img {
    width: 0.15rem;
    margin: 0 0.2rem;
  }
}
.video {
  margin-top: 0.2rem;
  img {
    width: 100%;
    height: 78vh;
    border-radius: 0;
  }
}
video {
  width: 100%;
  height: 80vh;
  border-radius: .2rem;
}
#preview {
  width: 80vw;
  height: 45vw;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  position: relative;
  border: 1px solid #ccc;
}
#preview img {
  width: 80vw;
  height: 100vw;
  cursor: pointer;
  min-width: 40vw;
  // max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all .1s ease;
}
// #preview {
//   position: relative;
//   width: 80vw;
//   height: 80vh;
//   margin: auto;
//   overflow: hidden;
// }

// #preview img {
//   position: absolute;
//   top: 0;
//   left: 0;
//   right: 0;
//   bottom: 0;
//   width: 100%;
//   height: 100%;
//   object-fit: contain;
//   transition: transform 0.2s;
// }
</style>
